import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bind',
  templateUrl: './bind.component.html',
  styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  //页面input元素显示的值
  inputValue:string = 'hello world';
  //页面image的url路径
  imageUrl:string = 'http://placehold.it/300x300';
  //td的colspan属性的值设置
  size:number = 2;
  //allClassString
  strClass:string = 'a b c';
  //设置页面字符串的字体大小的属性
  isBigSize:boolean = false;
  //模板使用ngClass来处理
  strNgClass:any = {
    a:false,
    b:false,
    c:false
  }
  //style的属性设置
  color:string = 'red';
  //ngstyle的属性设置
  strNgStyle:any = {
    'color':'red',
    'background':'yellow',
    'font-size':'60px'
  }
  //显示值
  name:string = 'happykala';
  constructor() { 
    //设置定时器处理样式的修改
    setTimeout(()=> {
      this.isBigSize = true;
      this.strNgClass = {
        a:true,
        b:true,
        c:true
      };
    } ,3000);
    //设置三秒的间隔把name属性设置为空
    setInterval(()=>this.name = 'happykala',3000)
  }

  ngOnInit() {
  }

  doSomething(event:any){
    console.log(event);
  }

  doInput(event:any){
    //输出dom对象的值
    console.log(event.target.value);
    // console.log(event.target.getAttribute('value'))

  }


  changeValue(event){
    this.name = event.target.value;
  }
}
